<ui:composition template="../templates/3-layoutTemplate.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="content-middle">
        <h:form>
            <p:dialog id="mockTestSuiteConfirmDialog" header="You are about to launch Mock Test" 
                      widgetVar="mtsDlg" modal="true" width="400" height="200" appendToBody="true"
                      closeOnEscape="true" resizable="false">  
                <p>Hi, You are about to start the test.  Once you accept this window, your time starts.</p>  
                <p>     
                    <div align="center">
                        <p:commandButton value="Start General Mock Session" style="width:230px;height: 30px;" process="@this" ajax="true" action="#{questionBoardBean.launchGeneralMockTest}">
                            <f:param name="testId" value="3" />
                        </p:commandButton>
                    </div>
                </p>                    
                <p>
                    <div align="center">
                        <p:commandButton value="Start Specific Mock Session" style="width:230px;height: 30px;" process="@this" ajax="true" action="#{questionBoardBean.launchSpecificMockTest}">
                            <f:param name="testId" value="4" />
                        </p:commandButton>
                    </div>
                </p>

            </p:dialog>
            <p:dialog id="launchExamConfirmDialog" header="You are about to launch Mock Test" 
                      widgetVar="launchExamConfirmDlg" modal="true" width="500" height="300" appendToBody="true"
                      closeOnEscape="true" resizable="false">  
                <p>Hi, You are about to start the General Exam.  Once you accept this window, your time starts.</p> 
                <p>Please note, you need to secure more that 70% in General exam and 70% in Specific exam and in aggregate should secure more than 80% to clear RT Tests</p>
                <p>You are recommended to keep referring to time left. Once the time is lapsed you will not be allowed to answer further or modify answers</p>  
                <p>To cancel this, hit escape or close this window by clicking a 'X' on the top right corner of this window</p>  
                <p>All the best and do well..</p>  

                <div align="center">
                    <p:commandButton value="Start" style="width:230px;height: 30px;" process="@this" ajax="true" action="#{questionBoardBean.launchExam}"></p:commandButton>
                </div>

            </p:dialog>


            <div align="center">
                <div style="width:1070px; height: 600px; border: 0px solid #036fab;">
                    <p:remoteCommand name="onPageLoad" action="#{registeredUsersDashboardBean.refreshDashboard}"
                                     autoRun="true" update="dbPanel2,dbPanel3">
                    </p:remoteCommand>
                    <p:panel id="dashBoardPanel" style="padding:70px 0px 50px 0px; border: 0">

                        <h:panelGrid columns="1">

                            <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"  escape="false" />

                        </h:panelGrid>
                        <h:panelGrid columns="3">
                            <p:panel id="dbPanel1" header="Schedule Exam" style="margin-right:70px;width:250px;height:400px;">
                                <h:panelGrid columns="1">


                                    <h:panelGrid columns="2">
                                        <p>Pick a date for</p>
                                        <h:selectOneMenu id="selectedCourseId" value="#{registeredUsersDashboardBean.selectedCourse}" style="text-align: right;width:110px;">
                                            <f:selectItems value ="#{registeredUsersDashboardBean.courseList}" 
                                                           var = "courseList" 
                                                           itemValue="#{courseList.courseId}"
                                                           itemLabel="#{courseList.courseName}" /> 
                                            <p:ajax listener="#{registeredUsersDashboardBean.handleCourseSelect}" />
                                        </h:selectOneMenu>
                                    </h:panelGrid>

                                    <p:calendar id="scheduleDateId" widgetVar="scheduleDateCalVar" mode="inline" mindate="#{registeredUsersDashboardBean.minScheduleDate}"
                                                maxdate="#{registeredUsersDashboardBean.maxScheduleDate}"
                                                navigator="true" showButtonPanel="true" style="width:230px;" value="#{registeredUsersDashboardBean.scheduleDate}">
                                        <p:ajax event="dateSelect" listener="#{registeredUsersDashboardBean.handleDateSelect}" update="outputTextScheduleDate"/> 
                                    </p:calendar>
                                    <h:panelGrid columns="2">
                                        <p>
                                            Schedule Date 
                                        </p>
                                        <h:outputText id="outputTextScheduleDate" value="#{registeredUsersDashboardBean.scheduleDate}" style="color: #D20005"> 
                                            <f:convertDateTime pattern="MMM dd, yyyy" />
                                        </h:outputText>
                                    </h:panelGrid>
                                    <div><p:commandButton process="@this,scheduleDateId,selectedCourseId" ajax="true" actionListener="#{registeredUsersDashboardBean.scheduleExam}"  value="Save Schedule" style="width:230px;" update="dbPanel2"/></div>
                                </h:panelGrid> 
                            </p:panel>			
                            <p:panel id="dbPanel2" header="Exam Detail" style="margin-right:70px;width:250px;height:400px;">
                                <h:panelGrid columns="1" >
                                    <p:accordionPanel style="border: 0;">
                                        <p:ajax event="tabChange" listener="#{registeredUsersDashboardBean.onTabChange}" />
                                        <c:forEach var="examSchedule" items="#{registeredUsersDashboardBean.userDashboardDetail.examScheduleList}">
                                            <p:tab title="#{examSchedule.examName} : Due in">
                                                <div align="center">
                                                    <h:panelGrid columns="2" cellpadding="8"> 
                                                        <p:graphicImage value="/images/signal_point#{examSchedule.signalStatus}.png" width="70" />
                                                        <h:outputText value="#{examSchedule.daysLeftForExam}" style="font-size:5em;"/>
                                                    </h:panelGrid>
                                                    <h:outputText value="Days" style="font-size:2em;" />
                                                    <p>
                                                        <h:outputText value="#{examSchedule.examDate}" style="font-size:1em;">
                                                            <f:convertDateTime pattern="dd-MMM-yyyy" />
                                                        </h:outputText>
                                                    </p>
                                                    <p>
                                                        <p:commandButton value="Launch #{examSchedule.examName} SH-#{examSchedule.scheduleId}" 
                                                                         actionListener="#{questionBoardBean.setScheduleId}" ajax="true"
                                                                         oncomplete="PF('launchExamConfirmDlg').show();">
                                                            <f:param name="scheduleId" value="#{examSchedule.scheduleId}" />
                                                        </p:commandButton>
                                                    </p>
                                                </div>
                                            </p:tab>
                                        </c:forEach>
                                    </p:accordionPanel>

                                </h:panelGrid>
                            </p:panel>	
                            <p:panel id="dbPanel3"  style="width:250px;height:400px;">
                                <p:commandButton value="Launch Mock Test" style="width:227px;height: 30px;" onclick="PF('mtsDlg').show();" type="button"></p:commandButton>
                                <p:panel id="creditPointsPanel" style="margin:5px 0px 5px 0px;">
                                    <div style="border: 1px solid #DC8700; height:20px;margin:5px 0px 5px 0px;padding: 20px;font-size:1.3em;">


                                    </div>
                                </p:panel>

                                <p:panel id="testHistoryPanel" header="Test History" style="height: 110px;">  
                                    <table style="" width="100%">
                                        <tr><th align="left">Test</th><th align="right">Attempts</th></tr>
                                        <c:forEach var="testStat" items="#{registeredUsersDashboardBean.userDashboardDetail.testStatsList}">
                                            <tr>
                                                <td>
                                                    <p:commandLink actionListener="#{registeredUsersDashboardBean.showTestHistory}">
                                                        <h:outputText style="color: #036fab; font-weight: bold;" value="#{testStat.examName}" />
                                                        <p:ajax event="dialogReturn"  />
                                                        <f:param name="testId" value="#{testStat.examId}" />
                                                    </p:commandLink>
                                                </td>
                                                <td align="right">
                                                    <p:commandLink actionListener="#{registeredUsersDashboardBean.showTestHistory}">
                                                        <h:outputText style="color: #036fab; font-weight: bold;" value="#{testStat.attemptCount}" />
                                                        <p:ajax event="dialogReturn"  />
                                                        <f:param name="testId" value="#{testStat.examId}" />
                                                    </p:commandLink>
                                                </td>
                                            </tr>

                                        </c:forEach>
                                    </table>
                                </p:panel>   

                                <p:panel id="examHistorPanel" header="Exam History" style="height: 110px;margin-top: 5px;">  
                                    <table style="" width="100%">
                                        <tr><th align="left">Test</th><th align="right">Attempts</th></tr>
                                        <c:forEach var="examStat" items="#{registeredUsersDashboardBean.userDashboardDetail.examStatsList}">
                                            <tr><td>#{examStat.examName}</td><td align="right">#{examStat.attemptCount}</td></tr>
                                        </c:forEach>
                                    </table>
                                </p:panel> 


                            </p:panel>									

                        </h:panelGrid>
                    </p:panel>
                </div>
            </div>

        </h:form>
    </ui:define>

</ui:composition>